<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>Konva画板类库演示</title>
    <script src="https://unpkg.com/konva@9/konva.min.js"></script>
    <link rel="stylesheet" href="css/konva-board.css">
</head>
<body>
    <div class="toolbar">
        <div class="tool-group">
            <label>工具:</label>
            <button class="tool-button active" onclick="setTool('brush')">画笔</button>
            <button class="tool-button" onclick="setTool('polygon')">多边形</button>
            <button class="tool-button" onclick="setTool('eraser')">橡皮擦</button>
            <button class="tool-button" onclick="setTool('select')">框选</button>
            <button class="tool-button" onclick="setTool('text')">文字</button>
        </div>
        
        <div class="tool-group" id="shapeGroup" style="display: none;">
            <label>图形:</label>
            <button class="tool-button" onclick="drawPresetShape('square')">正方形</button>
            <button class="tool-button" onclick="drawPresetShape('triangle')">三角形</button>
            <button class="tool-button" onclick="drawPresetShape('star')">五角星</button>
            <button class="tool-button" onclick="drawPresetShape('circle')">圆形</button>
        </div>
        
        <div class="tool-group">
            <label>颜色:</label>
            <input type="color" class="color-picker" id="colorPicker" value="#000000" onchange="updateColor()">
        </div>
        
        <div class="tool-group">
            <label>粗细:</label>
            <input type="range" class="brush-size" id="brushSize" min="1" max="50" value="5" onchange="updateBrushSize()">
            <span id="brushSizeValue">5</span>
        </div>
        
        <div class="tool-group">
            <button class="tool-button" onclick="clearCanvas()">清空画布</button>
            <button class="tool-button" id="undoBtn" onclick="undo()" disabled>撤销</button>
            <button class="tool-button" id="redoBtn" onclick="redo()" disabled>重做</button>
            <button class="tool-button" id="deleteBtn" onclick="deleteSelectedShapes()" style="display: none; background-color: #dc3545; border-color: #dc3545; color: white;">删除选中</button>
        </div>
    </div>
    
    <div class="canvas-container">
        <div id="container"></div>
    </div>
    
    <div class="info-panel">
        <h3>使用说明</h3>
        <ul>
            <li><strong>画笔模式</strong>: 自由绘制线条</li>
            <li><strong>多边形模式</strong>: 点击添加顶点，双击完成绘制，或选择预设图形</li>
            <li><strong>橡皮擦模式</strong>: 擦除经过的区域（类似真实橡皮擦）</li>
            <li><strong>框选模式</strong>: 拖拽选择区域，点击"删除选中"按钮删除选中元素</li>
            <li><strong>文字模式</strong>: 点击画布添加文字，点击文字显示编辑/删除按钮</li>
            <li><strong>颜色选择</strong>: 点击颜色选择器更改画笔颜色</li>
            <li><strong>粗细调节</strong>: 使用滑块调节画笔粗细</li>
            <li><strong>撤销/重做</strong>: 点击按钮或使用快捷键 Ctrl+Z / Ctrl+Y</li>
        </ul>
    </div>

    <script src="js/konva-board.js"></script>
    <script>
        // 创建画板实例
        let konvaBoard;
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 创建画板实例
            konvaBoard = new KonvaBoard('container', {
                width: 800,
                height: 600,
                backgroundColor: 'white',
                maxHistorySize: 50
            });
            
            // 设置事件回调
            konvaBoard.on('onToolChange', function(tool) {
                updateToolButtons(tool);
            });
            
            konvaBoard.on('onColorChange', function(color) {
                document.getElementById('colorPicker').value = color;
            });
            
            konvaBoard.on('onBrushSizeChange', function(size) {
                document.getElementById('brushSize').value = size;
                document.getElementById('brushSizeValue').textContent = size;
            });
            
            konvaBoard.on('onHistoryChange', function(historyLength, historyIndex) {
                updateUndoRedoButtons(historyLength, historyIndex);
            });
        });
        
        // 工具切换
        function setTool(tool) {
            konvaBoard.setTool(tool);
            
            // 显示或隐藏图形选择组
            const shapeGroup = document.getElementById('shapeGroup');
            if (tool === 'polygon') {
                shapeGroup.style.display = 'flex';
            } else {
                shapeGroup.style.display = 'none';
            }
            
            // 隐藏删除按钮
            document.getElementById('deleteBtn').style.display = 'none';
        }
        
        // 更新工具按钮状态
        function updateToolButtons(activeTool) {
            document.querySelectorAll('.tool-button').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 找到对应的按钮并激活
            const buttons = document.querySelectorAll('.tool-button');
            buttons.forEach(btn => {
                if (btn.textContent.includes(getToolDisplayName(activeTool))) {
                    btn.classList.add('active');
                }
            });
        }
        
        // 获取工具显示名称
        function getToolDisplayName(tool) {
            const toolNames = {
                'brush': '画笔',
                'polygon': '多边形',
                'eraser': '橡皮擦',
                'select': '框选',
                'text': '文字'
            };
            return toolNames[tool] || tool;
        }
        
        // 更新颜色
        function updateColor() {
            const color = document.getElementById('colorPicker').value;
            konvaBoard.setColor(color);
        }
        
        // 更新画笔粗细
        function updateBrushSize() {
            const size = parseInt(document.getElementById('brushSize').value);
            konvaBoard.setBrushSize(size);
        }
        
        // 绘制预设图形
        function drawPresetShape(shapeType) {
            konvaBoard.drawPresetShape(shapeType);
        }
        
        // 清空画布
        function clearCanvas() {
            konvaBoard.clearCanvas();
        }
        
        // 撤销
        function undo() {
            konvaBoard.undo();
        }
        
        // 重做
        function redo() {
            konvaBoard.redo();
        }
        
        // 删除选中的形状
        function deleteSelectedShapes() {
            konvaBoard.deleteSelectedShapes();
            document.getElementById('deleteBtn').style.display = 'none';
        }
        
        // 更新撤销/重做按钮状态
        function updateUndoRedoButtons(historyLength, historyIndex) {
            const undoBtn = document.getElementById('undoBtn');
            const redoBtn = document.getElementById('redoBtn');
            
            undoBtn.disabled = historyIndex <= 0;
            redoBtn.disabled = historyIndex >= historyLength - 1;
        }
        
        // 监听选中形状变化
        function checkSelectedShapes() {
            const selectedShapes = konvaBoard.getSelectedShapes();
            const deleteBtn = document.getElementById('deleteBtn');
            
            if (selectedShapes.length > 0) {
                deleteBtn.style.display = 'inline-block';
            } else {
                deleteBtn.style.display = 'none';
            }
        }
        
        // 定期检查选中状态
        setInterval(checkSelectedShapes, 100);
        
        // 导出数据示例
        function exportData() {
            const data = konvaBoard.exportData();
            console.log('导出数据:', data);
            
            // 可以保存到localStorage或发送到服务器
            localStorage.setItem('konvaBoardData', JSON.stringify(data));
            alert('数据已导出到控制台和localStorage');
        }
        
        // 导入数据示例
        function importData() {
            const savedData = localStorage.getItem('konvaBoardData');
            if (savedData) {
                const data = JSON.parse(savedData);
                konvaBoard.importData(data);
                alert('数据已导入');
            } else {
                alert('没有找到保存的数据');
            }
        }
        
        // 添加导出/导入按钮到工具栏
        document.addEventListener('DOMContentLoaded', function() {
            const toolbar = document.querySelector('.toolbar');
            const exportImportGroup = document.createElement('div');
            exportImportGroup.className = 'tool-group';
            exportImportGroup.innerHTML = `
                <button class="tool-button" onclick="exportData()">导出</button>
                <button class="tool-button" onclick="importData()">导入</button>
            `;
            toolbar.appendChild(exportImportGroup);
        });
    </script>
</body>
</html> 